<script>
    import { BeButton, BeForm, BeFormItem, BeRadioGroup, BeRadio, BeInput, BeSwitch } from '@brewer/beerui';
    import { yunmu, pindu, shengzi } from './store';
    import { random } from './js/utils';
    import Pinyin from './components/Pinyin.svelte'
    import Number from './components/Number.svelte';
    import Shengzi from './components/Shengzi.svelte';

    let ctrl = {
        mode: 'sz',
        manual: true,
        speed: 2,
    };
</script>

<main>
    <div class="controler">
        <div class="be-checkbox" />
        <BeForm bind:model={ctrl} labelWidth="130px">
            <BeFormItem label="模式：">
                <BeRadioGroup bind:checked={ctrl.mode}>
                    <BeRadio style="margin-right: 10px;" label="num">数字</BeRadio>
                    <BeRadio style="margin-right: 10px;" label="py">拼音</BeRadio>
                    <BeRadio label="sz">生字</BeRadio>
                </BeRadioGroup>
            </BeFormItem>
            <BeFormItem label="开启手动模式：">
                <BeSwitch bind:checked={ctrl.manual} />
            </BeFormItem>
            {#if  ctrl.mode !== 'sz'}
                <BeFormItem label="间隔频率（秒）：">
                    <BeInput type="number" size="small" bind:value={ctrl.speed} />
                </BeFormItem>
            {/if}
        </BeForm>
    </div>
    
    {#if ctrl.mode=='sz'}
        <Shengzi {...ctrl}/>
    {/if}
    
    {#if ctrl.mode=='num'}
        <Number {...ctrl} />
    {/if}

    {#if ctrl.mode == 'py'}
        <Pinyin {...ctrl} />
    {/if}
</main>

<style>
    
</style>
